<template>
  <div class="affix-demo">
    <h3 class="title">affix固定在容器内</h3>
    <h5 class="sub-title">如果遇到固定的dom比容器高，务必添加 overflow: hidden; 的样式，并且targetDom必须 position: relative|absolute。</h5>
    <div ref="affixContainer" v-height="700" class="affix-demo-3-vue bg-gray3-color relative text-right">
      <d-affix :fixedOffsetTop="80" :offset-top="20" :offset-bottom="20" class="affix-demo-3"
        :container="getContainer" @change="onchange">
        <button class="d-btn d-btn-blue" v-height="300">
          固定容器内
        </button>
      </d-affix>
    </div>
    <div v-height="200"></div>
  </div>
</template>

<script>
export default {
  name: 'demo3',
  data () {
    return {
      fixed: false
    }
  },
  methods: {
    onchange (fixed) {
      this.fixed = fixed
    },
    getContainer () {
      return this.$refs.affixContainer
    }
  }
}
</script>

<style lang="stylus" scoped>
.affix-demo-3
  float right
  width 120px
.affix-demo-3-vue
  overflow hidden
</style>
